<template>
	<view>
		<image src="/static/imgs/noMsg.png" mode="" v-show="empty" class="emp-img-g"></image>
		<scroll-view v-show="!empty" scroll-y enhanced scroll-with-animation :scroll-top="-1" :show-scrollbar="false"
			:style="{height: scrollHeight + 'rpx' }">
			<view class="msglist-card" v-for="item in resuList" :key="item._id"
				@click="emitId(item.userId || item.projId , item._id)">
				<view class="icon-close" @click.stop="remove(item._id,item.status)" v-if="type === '1'">
					<u-icon name="close" color="#c0c0c0" size="14px"></u-icon>
				</view>
				<view class="title-box">
					<u-icon name="tags-fill"></u-icon>
					<view class="title u-line-1">&nbsp {{item.projName||'--'}}</view>
				</view>
				<view class="line"></view>
				<view class="user-box" v-if="type == '0'">
					<at-user-item size="mini" type="1" :info="item" :status="item.status"></at-user-item>
				</view>
				<view class="user-box2" v-else="type == '0'">
					<text class="poptxt">投递于</text>
					<text style="margin: -8rpx 8rpx;color: #424242;">·</text>
					<at-formattime :timetamp="item.createTime || ''" class="time"></at-formattime>
				</view>
				<view class="tag-box">
					<u-tag :text="statusDesc(item.status)" plain size="mini" :type="tagType(item.status)"></u-tag>
				</view>
				<view class="reason-box" v-if="item.status == '3'">
					拒绝原因：{{ item.rejectReason || '--'}}
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import AtFormattime from '@/components/AtFormattime'
	import AtUserItem from "@/components/AtUserItem"
	export default {
		components: {
			AtUserItem,
			AtFormattime
		},
		props: {
			iempty: Boolean,
			type: {
				type: String, // 判断不同列表
				default: '0'
			},
			resulist: Array
		},
		data() {
			return {
				empty: false,
				resuList: [],
				scrollHeight: uni.$windowHeight
			}
		},
		watch: {
			iempty(n, o) {
				console.log(n,o);
				this.empty = n
			},
			resulist(n, o) {
				this.resuList = n
			}
		},
		methods: {
			statusDesc(status) {
				switch (status) {
					case '0':
						return '待查看'
						break
					case '1':
						return '已查看'
						break
					case '2':
						return '已联系'
						break
					case '3':
						return '已拒绝'
						break
				}
			},
			tagType(status) {
				switch (status) {
					case '0':
						return 'error'
						break
					case '1':
						return 'warning'
						break
					case '2':
						return 'success'
						break
					case '3':
						return 'info'
						break
				}
			},
			emitId(id,_id) {
				this.$emit('pidORuid', id,_id)
			},
			remove(id, status) {
				this.$emit('remove', id, status)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.msglist-card {
		margin: 15rpx auto;
		background-color: #fff;
		width: 92%;
		position: relative;
		border-radius: 10rpx;
		display: flex;
		flex-direction: column;

		.icon-close {
			position: absolute;
			right: 10rpx;
			top: 10rpx;
		}

		.title-box {
			width: 92%;
			margin: 20rpx auto;
			display: flex;
			font-weight: bold;
			font-size: 16px;
		}

		.line {
			width: 92%;
			margin: 0 auto;
			border-top: 1rpx solid #eee;
		}

		.user-box {
			width: 92%;
			margin: 20rpx auto;
		}

		.user-box2 {
			width: 92%;
			margin: 25rpx auto;
			padding: 10rpx 0;
			display: flex;

			.poptxt {
				color: #424242;
				font-size: 10px;
			}

			.time {
				font-size: 10px;
				color: #424242;
			}
		}

		.tag-box {
			position: absolute;
			// bottom: 30rpx;
			top: 105rpx;
			// transform: translateY(-50%);
			right: 15rpx;
		}

		.reason-box {
			width: 92%;
			margin: 20rpx auto;
			margin-top: 0;
			color: red;
			font-size: 10px;
		}
	}
</style>
